<template>
  <div class="content">
    <div class="topBox">
      <div class="title">质检点管理</div>
      <div class="line"></div>
      <div class="formBox">
        <t-form
            ref="form"
            :data="formData"
            :layout="'inline'"
            scroll-to-first-error="smooth"
        >
          <t-form-item label="质检点名称" name="name" :label-width="80">
            <t-input v-model="formData.name" placeholder="请输入质检点名称"></t-input>
          </t-form-item>

          <t-form-item label="质检点类型" name="type" :label-width="80">
            <t-select v-model="formData.type" placeholder="请选择质检点类型">
              <t-option key="" label="全部" value="" />
              <t-option key="0" label="词类" value="0" />
              <t-option key="1" label="正则表达式" value="1" />
              <t-option key="2" label="插话/抢话" value="2" />
              <t-option key="3" label="语速" value="3" />
              <t-option key="4" label="冷场" value="4" />
            </t-select>
          </t-form-item>

          <t-form-item label="是否致命项" name="fatal" :label-width="80">
            <t-select v-model="formData.fatal" placeholder="请选择是否致命项">
              <t-option key="" label="全部" value="" />
              <t-option key="0" label="不致命" value="0" />
              <t-option key="1" label="致命" value="1" />
            </t-select>
          </t-form-item>

          <t-form-item class="formHandleBox">
            <t-space size="small" style="gap: 10px;">
              <t-button class="queryBtn hoverBlue" v-preventReClick="500" @click="handleQuery(num)">查询</t-button>
              <t-button class="resetBtn hoverLightBlue" @click="handleReset">重置</t-button>
            </t-space>
          </t-form-item>
        </t-form>
      </div>
    </div>
    <div class="bottomBox" ref="bottomBox">
      <div class="leftBox">
        <div class="itemTop">
          <span>质检点分组</span>
          <t-button theme="default" variant="text" @click="handelMenu({})" v-permission="['rule:save']">
            <template #icon>
              <svg-icon
                  :name="'icon-add'"
                  class-name="add-svg-icon"
              ></svg-icon>
            </template>
            新增分组
          </t-button>
        </div>
        <div class="line" style="margin-top: 0"></div>
        <div class="itemList">
          <t-menu theme="light" v-if="menuState.activeMenu !== null" :default-value="menuState.activeMenu" width="191px" @change="changeHandler">
            <template v-for="item in menuState.menuList" :key="item.id">
              <t-menu-item :value="item.id">
                <span class="menuName">{{ item.name }}</span>
                <span class="handleBox">
                <svg-icon
                    @click.stop="handelMenu(item)"
                    :name="'icon-itemEdit'"
                    class-name="item-svg-icon"
                    v-permission="['rule:update']"
                ></svg-icon>
                <svg-icon
                    @click.stop="handleMenuDel(item)"
                    :name="'icon-itemDel'"
                    class-name="item-svg-icon"
                    v-permission="['rule:delete']"
                ></svg-icon>
              </span>
              </t-menu-item>
            </template>
          </t-menu>
        </div>
      </div>
      <div class="rightBox">
        <div class="topBox" ref="topBox">
          <div class="leftTitle">

          </div>
          <div class="rightHandleBox">
            <t-button class="addBtn hoverBlue" theme="primary" @click="handleDotDrawer(true, {})" v-permission="['point:save']">
              <template #icon>
                <svg-icon
                    :name="'icon-add'"
                    class-name="add-svg-icon"
                ></svg-icon>
              </template>
              新增质检点
            </t-button>
          </div>
        </div>
        <div class="tableBox">
          <div style="position: relative">
            <t-table
                :loading="isLoading"
                :height="tableHeight"
                ref="tableRef"
                row-key="index"
                :data="tableState.tableData"
                :columns="tableState.columns"
            >
              <template #handle="{ row }">
                <t-button theme="primary" class="rowEdit" @click="handleDotDrawer(false, row)" v-permission="['point:update']">
                  <template #icon>
                    <svg-icon
                        :name="'icon-rowEdit'"
                        class-name="row-svg-icon"
                    ></svg-icon>
                  </template>
                  编辑
                </t-button>

                <t-button theme="primary" class="rowDel" @click="handleDotDel(row)" v-permission="['point:delete']">
                  <template #icon>
                    <svg-icon
                        :name="'icon-rowDel'"
                        class-name="row-svg-icon"
                    ></svg-icon>
                  </template>
                  删除
                </t-button>
              </template>
            </t-table>
            <div class="emptyBox" v-if="tableState.tableData.length === 0">
              <svg-icon
                  :name="'icon-emptyTable'"
                  class-name="emptyTable-svg-icon"
              ></svg-icon>
              <span>暂无数据</span>
            </div>
          </div>
        </div>
        <div class="footerBox">
          <t-pagination
              v-model="current"
              v-model:pageSize="pageSize"
              :pageSizeOptions="[10, 20, 30, 50]"
              :total="totalNum"
              size="small"
              show-jumper
              @page-size-change="onPageSizeChange"
              @current-change="onCurrentChange"
          />
        </div>
      </div>
    </div>

<!--    新增 ｜ 编辑 质检点分组-->
    <t-dialog
        v-if="addModuleVisible"
        v-model:visible="addModuleVisible"
        class="ruleDialog"
        width="385"
        :header="moduleTitle"
        :onClose="onClose"
    >
      <t-form
          ref="ruleForm"
          :data="ruleData"
          :label-align="'top'"
          :rules="AHEAD_RULES"
          @reset="ruleReset"
          @submit="ruleSubmit">
        <t-form-item label="分组名称" name="name">
          <t-input
              v-model="ruleData.name"
              v-noSpace="ruleData.name"
              :maxlength="9"
              show-limit-number placeholder="请输入分组名称">
          </t-input>
        </t-form-item>
        <t-form-item class="handleRuleBox">
          <t-space size="small">
            <t-button theme="default" variant="base" type="reset">取消</t-button>
            <t-button class="hoverBlue" theme="primary" type="submit">保存</t-button>
          </t-space>
        </t-form-item>
      </t-form>
    </t-dialog>

<!--    删除分组-->
    <t-dialog
        v-model:visible="delVisible"
        theme="info"
        width="431"
        header="您确认删除该分组吗？"
        body=""
        :on-confirm="onClickConfirm"
    />
    <!--    删除弹窗-->
    <t-dialog
        v-model:visible="delDotVisible"
        class="dialogDel"
        theme="info"
        width="431"
        header="您确认删除此质检点吗？"
        :on-confirm="onClickDotConfirm"
    />

    <dot-drawer
        :drawerVisible="drawerVisible"
        :drawerTitle="drawerTitle"
        :infoData="infoData"
        :rowData="rowData"
        @resetDrawerVisible="resetDrawerVisible"
        @refreshTable="refreshTable"
    ></dot-drawer>
  </div>
</template>

<script setup lang="jsx">
import {getCurrentInstance, nextTick, onMounted, onUnmounted, reactive, ref} from "vue";
import {debounce} from '@/utils/tools';
import {MessagePlugin} from "tdesign-vue-next";
const pageInstance = getCurrentInstance()
import DotDrawer from "./components/dotDrawer.vue";
import {
  pointList,
  ruleList,
  newRule,
  detailRule,
  editRule,
  delRule,
  delPoint
} from '@/api/qualitySet/dotManager.js'
import cache from '@/utils/cache.js'

// form 表单
const formData = reactive({
  projectId: JSON.parse(cache.getLocalstorage('authInfo'))['agencyId'],
  name: '',
  type: '',
  fatal: '',
  ruleId: null
});
const onSubmit = ({ validateResult, firstError }) => {
  if (validateResult === true) {
    MessagePlugin.success('提交成功');
  } else {
    console.log('Validate Errors: ', firstError, validateResult);
    MessagePlugin.warning(firstError);
  }
};

// 抽屉
const infoData = ref({})
const drawerVisible = ref(false)
const drawerTitle = ref('')
const rowData = ref({})
const handleDotDrawer = (flag, data) => { // 新增、编辑质检点
  drawerTitle.value = flag ? '新增质检点' : '编辑质检点'
  drawerVisible.value = true
  if(!flag) {
    rowData.value = data
  } else {
    rowData.value = {}
  }
}
const resetDrawerVisible = (flag) => {
  drawerVisible.value = flag
}
const refreshTable = () => {
  handleQuery()
}


// 左侧导航
const menuState = reactive({
  activeMenu: null,
  menuList: []
})

// 菜单选择
const changeHandler = (active) => {
  infoData.value = {
    ruleId: active
  }
  menuState.activeMenu = active
  formData.ruleId = active
  current.value = 1
  pageSize.value = 10
  handleQuery()
}

// 分组列表
const getRuleList = (flag) => {
  let id = JSON.parse(cache.getLocalstorage('authInfo'))['agencyId']
  ruleList(id).then(res => {
    if(res.code === 0) {
      menuState.menuList = res.data

      // 首次加载设置默认选中第一项
      if(flag) {
        menuState.activeMenu = menuState.menuList[0].id
        formData.ruleId = menuState.menuList[0].id
        infoData.value = {
          ruleId: menuState.menuList[0].id
        }
      }
      handleQuery()
    }
  })
}

// 新增、编辑 分组
const AHEAD_RULES = {
  name: [ { required: true, message: '请输入分组名称' ,type: 'error', trigger: 'blur'}]
}
const ruleData = reactive({
  projectId: JSON.parse(cache.getLocalstorage('authInfo'))['agencyId'],
  name: '',
  type: 1
});
const addModuleVisible = ref(false)
const moduleTitle = ref('')
const isNewMenu = ref(false)
const handelMenu = (menu) => {
  moduleTitle.value = Object.keys(menu).length === 0 ? '新增质检点分组' : '编辑质检点分组'
  isNewMenu.value = Object.keys(menu).length === 0

  // 编辑调用详情接口
  if(Object.keys(menu).length > 0) {
    detailRule(menu.id).then(res => {
      if(res.code === 0) {
        ruleData.id = res.data.id
        ruleData.name = res.data.name
        ruleData.type = res.data.type
      }
    }).catch(error => {
      console.log(error)
    })
  }
  addModuleVisible.value = true
}

const ruleSubmit = ({ validateResult, firstError }) => {
  if (validateResult === true) {
    if (isNewMenu.value) { // 新增分组
      if (ruleData['id']) delete ruleData['id']
      newRule(ruleData).then(res => {
        if(res.code === 0) {
          pageInstance.refs.ruleForm.reset()
          addModuleVisible.value = false
          MessagePlugin.success('新增成功！');
          getRuleList(false)
        }
      })
    } else { // 编辑分组
      editRule(ruleData).then(res => {
        if(res.code === 0) {
          pageInstance.refs.ruleForm.reset()
          addModuleVisible.value = false
          MessagePlugin.success('修改成功！');
          getRuleList(false)
        }
      })
    }
  } else {
    console.log('Validate Errors: ', firstError, validateResult);
    MessagePlugin.warning(firstError);
  }
};
const onClose = () => {
  pageInstance.refs.ruleForm.reset()
  addModuleVisible.value = false
}
const ruleReset = () => {
  addModuleVisible.value = false
}
// 删除分组弹窗
const delVisible = ref(false)
const deleteMenuId = ref()
const handleMenuDel = (row) => {
  delVisible.value = true
  deleteMenuId.value = row.id
}
const onClickConfirm = (context) => {
  delRule(deleteMenuId.value).then(res => {
    if(res.code === 0) {
      MessagePlugin.success('删除成功！');
      // 判断是否删除的是选中的数据
      if(deleteMenuId.value === menuState.activeMenu) {
        menuState.activeMenu = null
        getRuleList(true)
      } else {
        getRuleList(false)
      }
    }
  })
  delVisible.value = false;
};

// 删除分组弹窗
const delDotVisible = ref(false)
const deleteDotId = ref()
const handleDotDel = (row) => {
  delDotVisible.value = true
  deleteDotId.value = row.id
}
const onClickDotConfirm = (context) => {
  delPoint(deleteDotId.value).then(res => {
    if(res.code === 0) {
      MessagePlugin.success('删除成功！');
    }
    delDotVisible.value = false
    if(tableState.tableData.length - 1 === 0) {
      current.value = current.value > 1 ? current.value - 1 : current.value
    }
    handleQuery()
  })
};

// table
const tableState = reactive({
  tableData: [],
  columns: [
    { colKey: '',title: '序号', ellipsis: true, cell:(h, { rowIndex }) => {
        {{
          return rowIndex + (current.value - 1) * pageSize.value + 1 >= 10
              ? rowIndex + (current.value - 1) * pageSize.value + 1
              : "0" + (rowIndex + (current.value - 1) * pageSize.value + 1)
        }}
      }
    },
    { colKey: 'name',title: '质检点名称', ellipsis: true },
    { colKey: 'type',title: '质检点类型', ellipsis: true, cell:(h, {row}) => {
        return ['词类', '正则表达式', '插话/抢话', '语速', '冷场'][row.type]
      } },
    { colKey: 'ruleName',title: '所属分组', ellipsis: true },
    { colKey: 'handle', title: '操作', align: 'center', width: 180 },
  ],
})
// table 高度变化
const tableHeight = ref(0)
const getTableHeight = () => {
  nextTick(() => {
    const windowHeight = window.innerHeight
    tableHeight.value = windowHeight - 350
  })
}

// 分页
const current = ref(1);
const pageSize = ref(10);
const totalNum = ref(0)
const onPageSizeChange = (size) => {
  pageSize.value = size
  handleQuery()
};
const onCurrentChange = (index, pageInfo) => {
  current.value = index
  handleQuery()
};

// 查询
const isLoading = ref(false)
const handleQuery = (num) => {
  isLoading.value = true
  let data = {
    pageNo: num === 1 ? 1 : current.value,
    pageSize: pageSize.value,
    ...formData
  }
  data.type = data.type === '' ? null : data.type
  data.fatal = data.fatal === '' ? null : data.fatal
  pointList(data).then(res => {
    if (res.code === 0) {
      tableState.tableData = res.data.list
      current.value = res.data['currPage']
      pageSize.value = res.data['pageSize']
      totalNum.value = res.data['totalCount']
    }
    isLoading.value = false
  }).catch(error => {
    isLoading.value = false
  })
}
// 重置
const handleReset = () => {
  pageInstance.refs.form.reset()
}
// window窗口 变化
const getWindowInfo = () => {
  const info = {
    width: window.innerWidth,
    height: window.innerHeight
  }
  getTableHeight()
}
const resizeInfo = debounce(getWindowInfo, 0)
onMounted(() => {
  getTableHeight()
  window.addEventListener('resize', resizeInfo);
  getRuleList(true)
})
onUnmounted(() => {
  window.removeEventListener('resize', resizeInfo);
})

</script>

<style lang="scss" scoped>
.content {
  background-color: #EBECED !important;
  position: relative;
  overflow: hidden;
  padding: 8px;
  .topBox {
    padding: 20px 20px 0 20px;
    //height: 57px;
    //line-height: 57px;
    opacity: 1;
    border-radius: 4px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 4px 10px 3px rgba(240, 240, 240, 0.05);
  }
  .title {
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: rgba(51, 51, 51, 1);
    text-align: left;
    vertical-align: top;
  }
  .line {
    height: 0;
    opacity: 1;
    background: rgba(204, 204, 204, 1);
    border: 1px solid rgba(239, 242, 245, 1);
    margin-top: 17px;
  }
  .formBox :deep(.t-form) {
    padding: 20px 0 20px 0;
    .t-form-inline {
      row-gap: 16px !important;
    }
    .t-form__item {
      width: 25%;
      height: 28px;
      margin-right: 0!important;
      padding-right: 10px;
      .t-input__wrap {
        height: 28px;
        .t-input {
          height: 28px;
          .t-input__inner {
            height: 28px;
          }
        }
      }
      .t-range-input {
        height: 28px;
      }
      .t-form__label--right {
        text-align: left;
        padding-right: 0;
        font-size: 12px;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.9);
      }
      .t-select__wrap {
        .t-input {
          height: 28px;
        }
      }
    }
    .t-form__item:nth-child(4) {
      padding-right: 0;
    }
    .formHandleBox {
      margin-left: auto;
      text-align: right;
      padding-right: 0;
      .t-space {
        margin-left: auto;
        justify-content: center;
        align-items: center;
        .queryBtn {
          border: none;
          width: 56px;
          height: 30px;
          border: none;
          opacity: 1;
          border-radius: 3px;
          background: rgba(30, 117, 254, 1);
          font-size: 12px;
          font-weight: 400;
          color: rgba(255, 255, 255, 1);
          text-align: center;
        }
        .resetBtn {
          width: 56px;
          height: 30px;
          opacity: 1;
          border-radius: 3px;
          background: rgba(236, 242, 254, 1);
          border: 0.5px solid rgba(30, 117, 254, 1);
          font-size: 12px;
          font-weight: 400;
          color: rgba(30, 117, 254, 1);
          text-align: center;
        }
        .arrowCont {
          display: flex;
          justify-content: center;
          align-items: center;
          span {
            font-size: 12px;
            font-weight: 500;
            color: rgba(138, 138, 138, 1);
          }
          .arrowTD-svg-icon {
            height: 16px;
            width: 16px;
            cursor: pointer;
          }
        }
      }
      .t-form__controls {
        margin-left: 0 !important;
      }
    }
  }
  .bottomBox {
    height: calc(100vh - 245px);
    margin-top: 8px;
    display: flex;
    border-radius: 4px;
    .leftBox {
      height: 100%;
      width: 219px;
      min-width: 219px;
      opacity: 1;
      background: rgba(255, 255, 255, 1);
      border-radius: 4px 0 0 4px;
      box-shadow: 0 4px 10px 3px rgba(240, 240, 240, 0.05);
      border-right: 1px solid rgba(239, 242, 245, 1);
      overflow: hidden;
      .itemTop {
        height: 60px;
        padding: 17px 20px 0 18px;
        span {
          font-size: 13px;
          font-weight: 600;
          color: rgba(56, 56, 56, 1);
        }
        :deep(.t-button) {
          font-size: 11px;
          font-weight: 400;
          line-height: 15.4px;
          color: rgba(30, 117, 254, 1);
          text-align: left;
          vertical-align: top;
          height: 22.5px;
          padding: 0;
          float: right;
        }
        :deep(.t-button):hover {
          background-color: unset;
        }
        .add-svg-icon {
          height: 16px;
          width: 16px;
          margin-right: 2px;
        }
      }
      .line {
        height: 0;
        opacity: 1;
        background: rgba(204, 204, 204, 1);
        border: 1px solid rgba(239, 242, 245, 1);
      }
      .itemList {
        height: calc(100% - 42px);
        text-align: center;
        :deep(.t-default-menu) {
          height: calc(100% - 28px)!important;
        }
        :deep(.t-menu) {
          padding-top: 10px;
          padding-bottom: 0;
          .t-menu__item {
            .t-menu__content {
              display: flex;
              width: 100%;
              .menuName {
                font-size: 12px;
                font-weight: 600;
                color: rgba(56, 56, 56, 1);
              }
              .handleBox {
                margin-left: auto;
                display: none;
              }
            }
            .item-svg-icon {
              height: 16px;
              width: 16px;
              cursor: pointer;
              margin: 0 4px;
            }
          }
          .t-menu__item:hover {
            .handleBox {
              margin-left: auto;
              display: inline-block;
            }
          }
          .t-is-active {
            background-color: rgba(241, 244, 254, 1);
            border-radius: 3px;
            .menuName {
              font-size: 12px;
              font-weight: 600;
              color: rgba(30, 117, 254, 1) !important;
            }
          }
        }
      }
    }
    .rightBox {
      border-radius: 0 4px 4px 0;
      background: rgba(255, 255, 255, 1);
      flex: 1;
      .topBox {
        padding: 0 16px;
        height: 61px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 0 4px 0 0;
        .leftTitle {
          font-size: 16px;
          font-weight: 600;
          color: rgba(51, 51, 51, 1);
          text-align: left;
          .titleScore {
            display: inline-block;
            width: 44px;
            height: 22px;
            line-height: 22px;
            text-align: center;
            opacity: 1;
            //border-radius: 4px;
            background: rgba(241, 244, 254, 1);

            font-size: 12px;
            font-weight: 600;
            color: rgba(30, 117, 254, 1);
          }
        }
        .rightHandleBox {
          margin-left: auto;
          .addBtn {
            //float: right;
            width: 113px;
            height: 28px;
            opacity: 1;
            border-radius: 3px;
            background: rgba(30, 117, 254, 1);
            padding: 5px 0;
            font-size: 12px;
            font-weight: 400;
            color: rgba(255, 255, 255, 1);
            .add-svg-icon {
              height: 16px;
              width: 16px;
              margin-right: 7px;
            }
          }
          .batch {
            margin-right: 10px;
            .t-button {
              width: 106px;
              height: 28px;
              opacity: 1;
              border-radius: 3px;
              background: rgba(227, 238, 255, 1);
              border: 0.5px solid rgba(9.38399999999999, 95.71679999999998, 234.6, 1);
              padding: 5px 0;
              font-size: 12px;
              font-weight: 400;
              color: rgba(30, 117, 254, 1);
              .batch-svg-icon {
                height: 16px;
                width: 16px;
                margin-right: 7px;
              }
            }
          }
        }
      }
      .tableBox {
        padding: 0 16px 0 21px;
        :deep(.t-table__content) {
          border-radius: 4px;
          .t-table--layout-fixed {
            border-left: 1px solid rgba(245, 245, 245, 1);
            border-right: 1px solid rgba(245, 245, 245, 1);
          }
        }
        :deep(.t-table__header) {
          tr {
            th {
              padding: 7px 10px;
              box-sizing: border-box;
            }
            th:nth-child(1) {
              padding-left: 90px;
            }
            th:nth-child(2) {
              padding-left: 90px;
            }
          }
        }
        :deep(.t-table__body) {
          tr {
            td {
              padding: 6px 10px;
              box-sizing: border-box;
            }
            td:nth-child(1) {
              padding-left: 90px;
            }
            td:nth-child(2) {
              padding-left: 90px;
            }
          }
          .t-button {
            border: none;
            width: 56px;
            height: 26px;
            opacity: 1;
            border-radius: 3px;
            font-size: 13px;
            font-weight: 400;
            padding: 0;
            margin: 0 4px;
            .row-svg-icon {
              height: 12px;
              width: 12px;
              margin-right: 2px;
            }
          }
          .rowDel {
            background: rgba(255, 224, 224, 1);
            color: rgba(227, 77, 89, 1);
          }
          .rowConfig {
            background: rgba(255, 238, 224, 1);
            color: rgba(255, 153, 0, 1);
          }
          .rowEdit {
            background: rgba(227, 238, 255, 1);
            color: rgba(30, 117, 254, 1);
          }
          .t-tag {
            width: 36px;
            height: 24px;
            opacity: 1;
            border-radius: 4px;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 5px 12px 5px 12px;
            font-size: 12px;
            font-weight: 400;
          }
          .t-tag--danger {
            background: rgba(255, 237, 237, 1);
            border: 1px solid rgba(233, 107, 116, 1);
            color: rgba(227, 77, 89, 1);
          }
          .t-tag--success {
            background: rgba(233, 246, 242, 1);
            border: 1px solid rgba(0, 184, 122, 1);
            color: rgba(0, 184, 122, 1);
          }
        }
      }
      :deep(.t-table__empty) {
        display: none;
      }
      .emptyBox {
        position: absolute;
        height: 116px;
        width: 69px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        .emptyTable-svg-icon {
          height: 62px;
          width: 69px;
        }
        span {
          font-size: 12px;
          font-weight: 400;
          color: rgba(92, 91, 91, 1);
        }
      }
    }
  }
}
.footerBox {
  width: calc(100% - 235px);
  position: absolute;
  bottom: 8px;
  overflow: hidden;
}
:deep(.t-dialog) {
  padding: 22px 22px 18px 22px;
  .t-dialog__body__icon {
    display: none;
  }
  .t-dialog__footer {
    padding-top: 31px;
    .t-dialog__cancel {
      background-color: white;
      border: none;
      width: 60px;
      height: 28px;
    }
    .t-dialog__confirm {
      width: 60px;
      height: 28px;
      opacity: 1;
      border-radius: 3px;
      background: rgba(30, 117, 254, 1);
    }
    .t-dialog__confirm:hover {
      background: var(--Brand-Brand6-Hover, #458DFF) !important;
      color: var(--text-icon-font-wh-190-anti, rgba(255, 255, 255, 0.90)) !important;
    }
  }
}
:deep(.ruleDialog .t-dialog__wrap .t-dialog__position .t-dialog) {
  padding: 22px 22px 18px 22px;
  .t-dialog__footer {
    display: none !important;
  }
  .t-dialog__body {
    padding-bottom: 0;
    .t-input {
      height: 28px;
    }
  }
}
.handleRuleBox {
  :deep(.t-form__label) {
    font-size: 14px;
    font-weight: 400;
    color: rgba(227, 60, 100, 0.9);

  }
  :deep(.t-form__controls) {
    text-align: right;
  }
  :deep(.t-form__controls-content) {
    display: inline-block;
    position: absolute;
    right: 0;
  }
  .t-button--theme-default {
    background-color: white;
    border: none;
    width: 60px;
    height: 28px;
  }
  .t-button--theme-primary {
    width: 60px;
    height: 28px;
    opacity: 1;
    border-radius: 3px;
    background: rgba(30, 117, 254, 1);
  }
}
</style>

